34. Projekt końcowy - tydzień 1 z 3

Twoim zadaniem będzie stworzenie full-stackowej aplikacji, zawierającej frontend oraz backend, przy wykorzystaniu Reacta, Reduksa, Thunka, Expressa, Mongo oraz Mongoose.

Aplikacja ma być stroną firmy oferującej produkty realizowane na zamówienie. Jej frontend będzie składać się z:

• strony głównej,
• podstrony produktu,
• koszyka,
• formularza zamówienia.

Temat projektu

Chcemy, żeby praca nad projektem była dla Ciebie przyjemnością, dlatego samodzielnie wybierzesz asortyment przedstawiany na stronie. Mogą to być np. ręcznie malowane koszulki, projekty bannerów reklamowych, czy nawet strony internetowe. Puść wodze fantazji — Twój sklep może "sprzedawać" co tylko chcesz! Najlepiej wybrać coś zgodnego z Twoimi upodobaniami – będzie Ci łatwiej rozwijać sklep o przydatne funkcjonalności, np. konfigurator parametrów produktu.

Opis części frontendowej

Część frontendowa powinna zostać wykonana jako aplikacja reactowa, wykorzystująca:

• React-Router do przechodzenia pomiędzy podstronami,
• moduły SCSS do stylów komponentów,
• reduksowy stan aplikacji,
• Redux-Thunk do obsługi komunikacji z API backendu aplikacji,
• Axios do wykonywania zapytań do API.

Na stronie głównej będą znajdować się produkty. Mogą być zupełnie różne (koszulka, kubek, plakat, etc.) albo odmiany tego samego produktu (różne style bannerów reklamowych). Każdy z produktów ma mieć co najmniej tytuł, zdjęcie oraz minimalną cenę (np. "od 50zł").

Na stronie pojedynczego produktu dodatkowo znajdzie się jego opis, dodatkowe zdjęcia (mogą być umieszczone pod opisem), oraz guzik dodawania do koszyka określonej ilości sztuk.

W koszyku będzie możliwość zmiany ilości sztuk, usunięcia produktu, oraz dodania opisu dla każdego z nich (np. "chcę taką koszulkę, tylko czerwoną").

Po dodaniu produktów do koszyka można przejść na stronę zamówienia, na której będzie wyświetlane podsumowanie zamówienia oraz formularz do podania danych kontaktowych w celu ustalenia szczegółów.

Opis części backendowej

Frontend będzie komunikował się z backendem za pomocą AJAX-a. Oznacza to, że backend ma pełnić rolę:

• serwera plików statycznych do serwowania frontendu,
• API do komunikacji frontendu z backendem,
• wykonywania operacji na bazie danych.

Do stworzenia backendu wykorzystaj Express, MongoDB oraz Mongoose.

API backendu ma pozwalać co najmniej na:

• pobranie podstawowych informacji o wszystkich produktach,
• pobranie wszystkich informacji o pojedynczym produkcie,
• zapisanie zamówienia (produkty, ich ilości i opisy, dane kontaktowe).

Jak zacząć?

W czasie bootcampu poruszyliśmy wszystkie zagadnienia, które są wymagane w tym projekcie. Jeśli masz jakiekolwiek wątpliwości jak zacząć, wróć do warsztatów backendu. Omawiamy w nim rozpoczynanie pracy nad aplikacją full-stackową, co pozwoli Ci szybko wystartować swój projekt końcowy.

Grafika

Pewnie zastanawiasz się, skąd czerpać inspiracje graficzne, kiedy nie ma obok designera. Pomysłów można szukać na popularnych stronach internetowych, ale jest też opcja odwiedzenia stron tematycznych takich jak:

• themeforest.net - największy sklep z szablonami,
• awwwards.com - zbiór wyróżnionych stron internetowych,
• dribbble.com - projekty innych designerów,
• tympanus.net/codrops - nietuzinkowe rozwiązania techniczne i graficzne,
• siteinspire.com - inspiracje stron podzielone wg tematu.

Po wykonaniu obowiązkowego zakresu projektu przyjdzie czas na dalszy rozwój aplikacji. Dzięki temu rozwiniesz swoje umiejętności i podniesiesz wartość swojego portfolio!

Poniżej znajdziesz kilka propozycji rozwinięcia projektu.

• efekty wizualne — animacje,
• karuzela fotografii, wyświetlająca kolejne zdjęcia produktu np. w lightboksie,
• możliwość wyboru parametrów produktu takich jak np. kolor lub rozmiar,
• możliwość wpisania opisu zamawianego towaru zarówno na stronie produktu (przed dodaniem go do koszyka), jak i w koszyku,
• wyszukiwarka produktów.

Większym, ale bardzo istotnym rozszerzeniem projektu może być również zapisywanie w backendzie każdej zmiany w koszyku. Pozwoliłoby to na zachowanie zawartości koszyka nawet pomiędzy odświeżeniami strony. Opisujemy to zagadnienie w module 35.

Kolejnym ciekawym usprawnieniem mogłoby być dostosowanie projektu do standardów PWA, które opisujemy w module 36.

Wreszcie, możesz przemyśleć również stworzenie panelu administracyjnego, który służyłby do edycji produktów i przeglądania zamówień.

Pamiętaj jednak, że te usprawnienia nie wpłyną na zaliczenie projektu, więc zajmij się nimi dopiero po ukończeniu obowiązkowego zakresu.